<template>
  <div class="primaryColor header">
    <div class="box">
      <i
        style="margin: 0 20px"
        @click="changeIsCollapse"  
        v-if="isCollapse"
        class="el-icon-s-fold"
      ></i>
      <i
        style="margin: 0 20px"
        @click="changeIsCollapse"
        v-else
        class="el-icon-s-unfold"
      ></i>
      <span style="font-size: 34px"></span>
    WX
    </div>

    <div class="box">
      <!-- 全屏 -->
      <rank></rank>

      <change></change>
      
       <i class="el-icon-bell el-icon--right"></i>
      <el-dropdown :hide-on-click="false">
           
        <span class="el-dropdown-link">
             admin
        
        </span>
       
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>admin</el-dropdown-item>
          <el-dropdown-item   ><el-button  @click="logout">退出</el-button></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import  {logout}  from  "../../util/http"
import rank from "@/views/FullScreen.vue";
import change from "@/views/change";
export default {
  name: "",
  components: {
    change,
    rank,
  },
  props: {},
  data() {
    return {};
  },
  computed: {
    isCollapse() {
      return this.$store.state.isCollapse;
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    changeIsCollapse() {
      this.$store.commit("changeIsCollapse");
    },
  //  退出
  async  logout(){               
      const{data :res }  =await  logout (`/api/user/logout.do`)   
      console.log(res)
      if(res.status !==0)
      return this.$message.error('退出失败')
      sessionStorage.removeItem('info')
      this.$router.push('/login')
      this.$message.success('退出成功')
  }
  },
};
</script>

<style   lang='scss' scoped>
.header {
  // width: 100%;;
  height: 60px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.box {
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
i {
  font-size: 35px;
}
.el-icon-bell {
  font-size: 23px;
  color: #fff;
}
</style>
